<template>
    <div class="bxConfigHistory">
        <van-nav-bar
                title="产品配置记录"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="date-box">
            <div class="time-text">时间</div>
            <div class="line">
                <div class="border-line" v-if="!timeField1">
                    <van-field readonly clickable :value="`请选择`" @click="timePopupShow1 = true; " right-icon="clock-o" />
                </div>
                <div class="border-line" v-if="timeField1">
                    <van-field readonly clickable :value="$formatDateTime(timeVal1, 'yyyy-MM-dd')" @click="timePopupShow1 = true" right-icon="clock-o" />
                </div>
                <div class="border-line" v-if="!timeField2">
                    <van-field readonly clickable :value="`请选择`" @click="timePopupShow2 = true;" right-icon="clock-o" />
                </div>
                <div class="border-line" v-if="timeField2">
                    <van-field readonly clickable :value="$formatDateTime(timeVal2, 'yyyy-MM-dd')" @click="timePopupShow2 = true" right-icon="clock-o" />
                </div>
            </div>
        </div>
        <van-popup v-model="timePopupShow1" position="bottom">
            <van-datetime-picker v-model="timeVal1" type="date"  @cancel="timePopupShow1 = false" @confirm="timeConfirm1" />
        </van-popup>
        <van-popup v-model="timePopupShow2" position="bottom">
            <van-datetime-picker v-model="timeVal2" type="date"  @cancel="timePopupShow2 = false" @confirm="timeConfirm2" />
        </van-popup>
        <el-table :data="tableData" border style="width: 100%" @selection-change="tableSelectChange">
            <el-table-column fixed type="selection"></el-table-column>
            <el-table-column prop="company_name" label="客户名称" width="120"></el-table-column>
            <el-table-column prop="goods_name" label="产品名称" width="150"></el-table-column>
            <el-table-column prop="price" label="产品金额" width="120"></el-table-column>
            <el-table-column prop="start_time_text" label="合同开始时间" width="120"></el-table-column>
            <el-table-column prop="over_time_text" label="合同截止时间" width="120"></el-table-column>
            <el-table-column prop="customer_text" label="客服负责人" width="120"></el-table-column>
            <el-table-column prop="finance_text" label="财务负责人" width="120"></el-table-column>
            <el-table-column prop="compensate_text" label="工商负责人" width="120"></el-table-column>
        </el-table>
        <van-pagination class="pagination" v-model="page" :page-count="pageCount" @change="pageChange" />
        <van-button class="pagination" type="warning" @click="delTable" size="large">删除</van-button>
    </div>
</template>

<script>
    // confirmDialog
    export default {
        name: "zxConfigHistory",
        components: {},
        data() {
            return {
                timeField1: false,
                timeVal1: new Date(),
                timePopupShow1: false,

                timeField2: false,
                timeVal2: new Date(),
                timePopupShow2: false,

                minDate: new Date(),
                maxDate: new Date(),

                tableData: [],
                page: 1,
                limit: 10,
                pageCount: 1,

                tableSelectValArr: [],
            }
        },
        methods: {
            timeConfirm1() {
                this.timeField1 = true;
                this.timePopupShow1 = false;
                if (this.timeField1 && this.timeField2) {
                    this.getList();
                }

            },
            timeConfirm2() {
                this.timeField2 = true;
                this.timePopupShow2 = false;
                if (this.timeField1 && this.timeField2) {
                    this.getList();
                }
            },
            pageChange() {
                this.getList();
            },
            getList() {
                let params = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    over_time_range: '',
                    page: this.page,
                    limit: this.limit,
                };
                if (this.timeField1 && this.timeField2) {
                    let timeVal1 = this.timeVal1
                    let timeVal2 = this.timeVal2
                    params.over_time_range = `${this.$formatDateTime(this.timeVal1, 'yyyy-MM-dd')}~${this.$formatDateTime(this.timeVal2, 'yyyy-MM-dd')}`
                }
                this.$post("/api/member_goods/index", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.pageCount = res.data.totalPage // 发票类型
                            this.tableData = res.data.dataList // 发票类型
                            this.$Toast.clear();
                        }
                    })
                    .catch(err => { });
            },
            tableSelectChange(val) {
                this.tableSelectValArr = val;
            },
            delTable() {

                if (this.tableSelectValArr.length == 0) {
                    this.$Toast('请选择商品')
                    return;
                }
                let Arr = []
                this.tableSelectValArr.map((item, index) => {
                    Arr.push(item.id)
                })
                this.$Dialog.confirm({
                    title: '温馨提示',
                    message: '确认删除这几个产品么',
                    closeOnPopstate: true,
                })
                    .then(() => {
                        let params = {
                            wx_member_id: localStorage.getItem('wx_member_id'),
                            token: localStorage.getItem('token'),
                            id: Arr,

                        };
                        this.$post("/api/member_goods/del", params)
                            .then(res => {
                                if (res.code == 1) {
                                    this.getList();
                                    this.$Toast(res.msg);
                                }
                            })
                            .catch(err => { });
                    })
                    .catch(() => { });
            },
        },
        created() {
            this.$Toast.loading({
                duration: 0, // 持续展示 toast
                message: '加载中...',
                forbidClick: true
            });

            this.getList();
        },

    }
</script>

<style scoped lang="less">
    .bxConfigHistory {
        padding: 11px;
    }
    .pagination {
        margin-top: 11px;
    }
    .date-box {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 11px;

        > div:nth-of-type(1) {
            width: 70px;
        }
    }

    .line {
        display: flex;
        align-items: center;

        .border-line {
            border: 1px solid #dcdcdc;
            padding: 0 2px;
            margin: 0 3px;
            border-radius: 3px;
        }

        .time-text {
            flex-wrap: nowrap;
            width: 50px;
            font-size: 15px;
            color: #333333;
        }

        > .money-box {
            position: relative;

            > div {
                flex: 1;
                margin: 3px 6px;
                border: 1px solid #dcdcdc;
                color: #333;
                border-radius: 5px;
            }

            > .money-box {
                position: relative;

                span {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                input {
                    border: none;
                    padding-left:6px;
                    height: 25px;
                    width: 112px;
                    padding-right:10px;
                    font-size: 12px;
                    text-align: right;
                }
            }
        }
    }

    .table-box {
        overflow-x: scroll;
    }
</style>